<template>
  <div>
    <!-- 顶部栏 -->
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search">
        <van-icon name="search" />
        <span @click="$router.push({ path: '/search' })">搜索商品</span>
        <!-- router 传参方式 name 可以使用params 和query传参  path可以使用${}传参 和params传参 -->
      </div>
      <div class="user">
        <van-icon name="manager-o" @click.native="jump" />
      </div>
    </div>
    <!-- 标签页 -->
    <van-tabs v-model="active" sticky swipeable>
      <!-- 新闻栏目 -->
      <van-tab :title="item.name" v-for="item in colummList" :key="item.id">
        <!-- 添加标签(管理列表) -->
        <!-- <van-icon
          name="plus"
          @click="$router.push({ path: '/program' })"
          class="addlist"
        /> -->
        <!-- 上拉加载 -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 下拉刷新 -->
          <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
            <postblock
              v-for="item in item.postList"
              :key="item.id"
              :post="item"
            ></postblock>
          </van-pull-refresh>
          <!-- 新闻列表 -->
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from "@/api/categorys.js";
import { getNewList } from "@/api/post.js";
import postblock from "@/components/postblock.vue";
export default {
  data() {
    return {
      active: localStorage.getItem("userKey") ? 1 : 0,
      colummList: [],
      //postList: [],
    };
  },
  components: {
    postblock,
  },
  async mounted() {
    //伪元素 没有结构 点击的话 是父元素来响应  （子元素都有自己的样式）
    //为栏目导航条绑定单击事件 使用箭头函数不然 this的指向会改变
    document.querySelector(".van-sticky").onclick = (e) => {
      //判断是不是父元素响应 如果是 说明用户单击了预留区域
      if (e.target.className == "van-sticky") {
        this.$router.push({ path: "/program" });
      }
    };

    //栏目列表数据
    let res = await getCateList();

    this.colummList = res.data.data;
    console.log(this.colummList);
    //改造栏目数据 给每一个栏目添加一个postList
    if (localStorage.getItem("addlist")) {
      this.colummList = JSON.parse(localStorage.getItem("addlist"));
      //console.log(1);
      //判断是否登录 登录添加两个 没登录添加一个
      if (localStorage.getItem("userKey")) {
        // console.log(1);
        //console.log(res.data.data, res.data.data[0]);
        this.colummList.unshift(res.data.data[1]);
        this.colummList.unshift(res.data.data[0]);
      } else {
        this.colummList.unshift(res.data.data[1]);
      }
    }

    this.colummList = this.colummList.map((v) => {
      // ...v把所有得栏目解构到了v中，并给所有栏目添加了postList
      return {
        ...v,
        postList: [],
        pageIndex: 1,
        pageSize: 6,
        loading: false,
        finished: false,
        isLoading: false,
      };
    });
    /*  if (localStorage.getItem("addlist")) {
      this.colummList = JSON.parse(localStorage.getItem("addlist"));

    } */
    // console.log(this.colummList);
    this.init();
  },
  watch: {
    async active() {
      //通过栏目的索引找到每一个栏目里面的新闻列,再找到新闻列里面的id
      //console.log(this.active);
      if (this.colummList[this.active].postList.length == 0) {
        //没有数据，发请求 加载
        this.init();
      }
    },
  },
  methods: {
    //跳到栏目管理页面
    /* program() {
      console.log(1);
    }, */
    //跳到个人中心页
    jump() {
      //判断是否有登录 是否id
      let id = localStorage.getItem("userId");
      //从首页跳转到个人中心
      if (id) {
        this.$router.push({ path: `/mypersonal/${id}` });
      } else {
        this.$toast.fail("未登录，请先登录");
        this.$router.push({ path: "/login" });
      }
    },

    //下拉刷新
    onRefresh() {
      //重置页码为1
      this.colummList[this.active].pageIndex = 1;
      //加载完成 不再继续加载
      this.colummList[this.active].isLoading = false;
      //刷新后返回第一页 后面还有数据 finished = false，即可以继续加载后面的数据
      this.colummList[this.active].finished = false;
      //清空之前的数据 重新加载
      this.colummList[this.active].postList.length = 0;
      // setTimeout(() => {
      this.init();
      // }, 2000);
    },
    //上拉加载
    onLoad() {
      //改变页码
      this.colummList[this.active].pageIndex++;
      this.init();
    },
    //请求文章数据方法
    async init() {
      //封装获取不同栏目的新闻方法
      let res2 = await getNewList({
        category: this.colummList[this.active].id,
        pageIndex: this.colummList[this.active].pageIndex,
        pageSize: this.colummList[this.active].pageSize,
      });
      //没有数据 发请求，存储到当前得栏目postList中
      //上拉加载所请求的数据追加到数组中,把数组里面的内容加到postList数组所以解构
      this.colummList[this.active].postList.push(...res2.data.data);
      this.colummList[this.active].loading = false;
      if (res2.data.data.length < this.colummList[this.active].pageSize)
        this.colummList[this.active].finished = true;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  background-color: #f00;
  align-items: center;
  color: #fff;
}
.van-icon-plus::before {
  position: fixed;
  right: 15px;
  top: 52px;
  font-size: 17px;
}
/* .addlist {
  //position: fixed;
  position: sticky;
  // position: absolute;
} */
/deep/ .van-tabs--line .van-tabs__wrap {
  padding-right: 44px;
}
/deep/ .van-sticky {
  &::before {
    content: "+";
    position: absolute;
    right: 0;
    font-size: 25px;
    width: 44px;
    height: 45px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
  }
}
.search {
  flex: 1;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  .van-icon {
    font-size: 16px;
  }
}
.van-icon {
  font-size: 24px;
  padding: 0 10px;
}
.iconfont {
  font-size: 50px;
  padding: 0 10px;
}
</style>